<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>画图</title>
	</head>
	<body onkeydown="down(event)">
		<p id="p1">&nbsp;</p>
		<p id="p2">&nbsp;</p>
		<button type="button" onclick="draw()">画面</button>
		<button type="button" onclick="eraser()">擦除</button>
		<button type="button" onclick="clea()">清空</button><br>
		<canvas id="c1" width="400px" height="400px" style="border: 1px solid blue;"></canvas><br />
		<script type="text/javascript">
			var oc1=document.getElementById("c1");
			var ogc=oc1.getContext("2d");
			ogc.strokeStyle="#f00";
			var s=0;
			function draw(){
				s=1;
			}
			function eraser(){
				s=2;
			}
			function clea(){
				ogc.clearRect(0,0,oc1.width,oc1.height);
			}
			oc1.onmousedown=function(ev){
				var ev=ev||event;
				ogc.beginPath();
				ogc.moveTo(ev.clientX-oc1.offsetLeft,ev.clientY-oc1.offsetTop);
				document.onmousemove=function(ev){
					var ev=ev||event;
					if(s==1){
						ogc.lineTo(ev.clientX-oc1.offsetLeft,ev.clientY-oc1.offsetTop);
						ogc.stroke();
						document.getElementById("p1").innerHTML="offsetLeft:"+oc1.offsetLeft+",offsetTop:"+oc1.offsetTop;
						document.getElementById("p2").innerHTML="clientX:"+ev.clientX+",clientY:"+ev.clientY;
					}
					if(s==2){
						ogc.clearRect(ev.clientX-oc1.offsetLeft,ev.clientY-oc1.offsetTop,5,5);
					}
				}
				document.onmouseup=function(){
					document.onmousemove=null;
				}
			}
			function down(e){
				if(e.ctrlKey){
					switch(e.keyCode){
						case 66:
							ogc.strokeStyle="blue";
							break;
						case 71:
							ogc.strokeStyle="green";
							break;
						case 82:
							ogc.strokeStyle="red";
							break;
						case 38:
							ogc.lineWidth+=1;
							break;
						case 40:
							ogc.lineWidth-=1;
					}
				}
			}
			
		</script>
	</body>
</html>
